import React, { useState, useRef, useEffect } from "react";
import "../assets/css/shouyeshouqi.css";
import { DownOutlined, UpOutlined } from "@ant-design/icons";
import { Pagination, Checkbox } from "antd";
import im from "../assets/images/形状.png";
import bian from "../assets/images/编辑按钮.png";
import wu from "../assets/images/位图.png";
import axios from "axios";

export default function DetailsPanel({
  isVisible,
  onClose,
  currentTab,
  handleTabChange,
  itemDetails,
  onDelete,
  onUpdate,
}) {
  const [leaseData, setLeaseData] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [isCreating, setIsCreating] = useState(false); // 控制是否显示新建弹窗
  const [selectedLease, setSelectedLease] = useState(null); //
  const [formData, setFormData] = useState({
    id: "",
    kename: "",
    keuser: "",
    kehang: "",
    kegui: "",
    qianname: "",
    qianlianxi: "",
    qianshouji: "",
    qianyouxiang: "",
    guanname: "",
    guanzheng: "",
    guanshou: "",
    guanyouxiang: "",
    suolouyu: "",
    suolouceng: "",
    kongjian: "",
    zuzhukaishi: "",
    zuzhujieshu: "",
  });

  const getData = () => {
    axios
      .get("http://172.16.17.120:8080/getxinjian", {
        params: {
          act: "index",
          op: "getHomeMoreProduct",
          curpage: currentPage,
          xxclient: "new",
        },
      })
      .then((res) => {
        setLeaseData(res.data || []); // 更新 leaseData 状态
      })
      .catch((err) => {
        console.error("获取数据失败：", err);
      });
  };
  const handleSave = () => {
    axios
      .post("http://172.16.17.120:8080/xinjian", formData)
      .then((res) => {
        alert("客户信息保存成功！");
        // 清空表单数据
        setFormData({
          id: "",
          kename: "",
          keuser: "",
          kehang: "",
          kegui: "",
          qianname: "",
          qianlianxi: "",
          qianshouji: "",
          qianyouxiang: "",
          guanname: "",
          guanzheng: "",
          guanshou: "",
          guanyouxiang: "",
          suolouyu: "",
          suolouceng: "",
          kongjian: "",
          zuzhukaishi: "",
          zuzhujieshu: "",
        });
        setIsCreating(false); // 关闭新建弹窗
        getData(); // 刷新数据
      })
      .catch((err) => {
        console.error("保存失败：", err);
      });
  };

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const [editStates, setEditStates] = useState({
    basicInfo: false, // 控制基础资料遮罩层显示
    contractInfo: false, // 控制签约联系人遮罩层显示
    basicIn: false,
  });

  useEffect(() => {
    getData();
  }, [currentPage]); // 如果页码变化，重新加载数据

  const [overlay, setOverlay] = useState({ visible: false, type: "" });

  const handleClick = (status) => {
    setOverlay({ visible: true, type: status });
  };

  const handleClose = () => {
    setOverlay({ visible: false, type: "" });
  };

  const handleEditChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const handleEditConfirm = (section) => {
    onUpdate(formData); // 提交更新
    setEditStates({ ...editStates, [section]: false }); // 关闭对应遮罩层
  };

  const handleInvoiceTypeChange = (e) => {
    setFormData({ ...formData, invoiceType: e.target.value });
  };

  const handleSelectLease = (item) => {
    setSelectedLease(item); // 设置当前选中的租期信息
  };

  // 关闭遮罩层
  const handleCloseOverlay = () => {
    setSelectedLease(null);
  };

  const handleAction = () => {
    if (selectedLease.status === "租期中") {
      alert("退租操作已执行！");
    } else if (selectedLease.status === "租期已结束") {
      alert("续租操作已执行！");
    }
    setSelectedLease(null); // 操作后关闭遮罩层
  };

  return (
    <div className={`right-slide-mask ${isVisible ? "visible" : ""}`}>
      <div className="right-slide-close" onClick={onClose}>
        ×
      </div>
      <div className="right-slide-content">
        <div className="zyoucetanchututou">
          <div className="zyoucetanchututouyi">
            <div className="zyoucetanchututouer">
              {itemDetails?.kename}
              <img className="zyoucetanchututoutu" src={bian} alt="" />
            </div>
            <div className="zyoucetanchututousan" onClick={onDelete}>
              删除
            </div>
          </div>
          <div className="zyoucetanchututousi">客户ID:KH20191223152623</div>
        </div>
        <div className="zright-slide-header">
          {["客户详情", "租约", "租期", "账单", "保修", "访客"].map((tab) => (
            <div
              key={tab}
              className={`right-slide-title ${
                currentTab === tab ? "active-tab" : ""
              }`}
              onClick={() => handleTabChange(tab)}
            >
              {tab}
            </div>
          ))}
        </div>
        <div className="right-slide-body">
          {currentTab === "客户详情" && (
            <div>
              <div className="zgukeziliaobianjiyitouyige">
                <div className="zgukeziliaobianjiyi">
                  <div>基础资料</div>
                  <div
                    onClick={() =>
                      setEditStates({ ...editStates, basicInfo: true })
                    }
                  >
                    编辑
                  </div>

                  {editStates.basicInfo && (
                    <div className="Zedit-modal-mask">
                      <div className="Zedit-modal">
                        <div className="zxinjiankehuzuotou">
                          <div className="zxinj                                              iankehuzuotouyi">
                            基础资料
                          </div>
                          <div
                            className="zxinjiankehuzuotouer"
                            onClick={() =>
                              setEditStates({ ...editStates, basicInfo: false })
                            }
                          >
                            ×
                          </div>
                        </div>
                        <div className="zxinjiankehuzuoser">客户信息</div>
                        <div className="zxinjiankehuzuozhoyi">
                          <div>
                            <div className="zxinjiankehuzuoxing">
                              <span>* </span>客户类型
                            </div>
                            <select
                              name="keuser"
                              value={formData.kename || ""}
                              onChange={handleEditChange}
                              className="zxinjianzuoshangxuanz"
                            >
                              <option value="">请选择</option>
                              <option>傻逼1</option>
                              <option>选项2</option>
                              <option>选项3</option>
                            </select>
                          </div>
                          <div>
                            <div className="zxinjiankehuzuoxing">
                              <span>* </span>客户类型
                            </div>
                            <select
                              name="kename"
                              value={formData.keuser || ""}
                              onChange={handleEditChange}
                              className="zxinjianzuoshangxuanz"
                            >
                              <option value="">请选择</option>
                              <option>傻逼1</option>
                              <option>选项2</option>
                              <option>选项3</option>
                            </select>
                          </div>
                          <div>
                            <div className="zxinjiankehuzuoxingg">行业</div>
                            <select
                              name="kehang"
                              value={formData.keuser || ""}
                              onChange={handleEditChange}
                              className="zxinjianzuoshangxuanz"
                            >
                              <option value="">请选择</option>
                              <option>选项1</option>
                              <option>选项2</option>
                              <option>选项3</option>
                            </select>
                          </div>
                        </div>

                        <div
                          className="zxinjiankehubaocun"
                          onClick={() => handleEditConfirm("basicInfo")}
                        >
                          保存
                        </div>
                      </div>
                    </div>
                  )}
                </div>
                <div className="zgukeziliaobianjieryi">
                  <div className="zgukeziliaobianjier">
                    <div className="zgukeziliaobianjieryikuian">
                      <div className="zgukeziliaobianjierhuizi">客户类型</div>
                      <div>{itemDetails?.kename || "个人"}</div>
                    </div>
                    <div className="zgukeziliaobianjisan">
                      <div className="zgukeziliaobianjierhuizi">人员规模</div>
                      <div>{itemDetails?.keuser || "150-500人"}</div>
                    </div>
                  </div>
                  <div>
                    <div className="zgukeziliaobianjierhuizi">行业</div>
                    <div>{itemDetails?.industry || "软件开发"}</div>
                  </div>
                </div>
              </div>
              <div className="zgukeziliaobianjiyitouyige">
                <div className="zgukeziliaobianjiyii">
                  <div>签约联系人</div>
                  <div
                    onClick={() =>
                      setEditStates({ ...editStates, contractInfo: true })
                    }
                  >
                    编辑
                  </div>

                  {/* 签约联系人编辑遮罩层 */}
                  {editStates.contractInfo && (
                    <div className="Zedit-modal-mask">
                      <div className="Zedit-modal">
                        <h3>编辑签约联系人</h3>
                        <label>
                          姓名:
                          <input
                            type="text"
                            name="type"
                            value={formData.type || ""}
                            onChange={handleEditChange}
                          />
                        </label>
                        <label>
                          职务:
                          <input
                            type="text"
                            name="scale"
                            value={formData.scale || ""}
                            onChange={handleEditChange}
                          />
                        </label>
                        <button
                          onClick={() => handleEditConfirm("contractInfo")}
                        >
                          确定
                        </button>
                        <button
                          onClick={() =>
                            setEditStates({
                              ...editStates,
                              contractInfo: false,
                            })
                          }
                        >
                          取消
                        </button>
                      </div>
                    </div>
                  )}
                </div>
                <div className="zgukeziliaobianjieryi">
                  <div className="zgukeziliaobianjier">
                    <div className="zgukeziliaobianjieryikuian">
                      <div className="zgukeziliaobianjierhuizi">姓名</div>
                      <div>{itemDetails?.qianname || "张三丰"}</div>
                    </div>
                    <div className="zgukeziliaobianjisan">
                      <div className="zgukeziliaobianjierhuizi">职务</div>
                      <div>{itemDetails?.qianlianxi || "董事长"}</div>
                    </div>
                  </div>
                  <div className="zgukeziliaobianjier">
                    <div className="zgukeziliaobianjieryikuian">
                      <div className="zgukeziliaobianjierhuizi">手机号</div>
                      <div>{itemDetails?.qianshouji || "+86 18888888888"}</div>
                    </div>
                    <div className="zgukeziliaobianjisan">
                      <div className="zgukeziliaobianjierhuizi">邮箱</div>
                      <div>{itemDetails?.qianyouxiang || "xxx@qq.com"}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="zgukeziliaobianjiyitouyige">
                <div className="zgukeziliaobianjiyii ">
                  <div>租期管理员</div>
                  <div
                    onClick={() =>
                      setEditStates({ ...editStates, basicIn: true })
                    }
                  >
                    编辑
                  </div>
                  {editStates.basicIn && (
                    <div className="Zedit-modal-mask">
                      <div className="Zedit-modal">
                        <div className="zxinjiankehuzuotou">
                          <div className="zxinjiankehuzuotouyi">
                            编辑发票信息
                          </div>
                          <div
                            className="zxinjiankehuzuotouer"
                            onClick={() =>
                              setEditStates({ ...editStates, basicIn: false })
                            }
                          >
                            ×
                          </div>
                        </div>
                        <div className="zxinjiankehuzuoser"></div>
                        <div className="zxinjiankehuzuozhoyi">
                          <div>
                            <div className="zxinjiankehuzuoxing">
                              <span>* </span>发票类型
                            </div>
                            <select
                              name="invoiceType"
                              value={formData.invoiceType} // 绑定到 `formData.invoiceType`
                              onChange={handleInvoiceTypeChange}
                              className="zxinjianzuoshangxuanz"
                            >
                              <option value="企业">企业</option>
                              <option value="个人">个人</option>
                            </select>
                          </div>
                        </div>
                        <div className="zbianjiyoupiaoxinxing">
                          {formData.invoiceType === "企业" && (
                            <>
                              <div>
                                <div className="zxinjiankehuzuoxinggg guiop">
                                  发票抬头
                                </div>
                                <input
                                  className="zxinjianzuoshangxuanz"
                                  type="text"
                                  name="invoiceTitle"
                                  value={formData.guanzheng || ""}
                                  onChange={handleEditChange}
                                  placeholder="请输入"
                                />
                              </div>
                              <div>
                                <div className="zxinjiankehuzuoxinggg guiop">
                                  纳税人识别号
                                </div>
                                <input
                                  className="zxinjianzuoshangxuanz"
                                  type="text"
                                  name="taxNumber"
                                  value={formData.taxNumber || ""}
                                  onChange={handleEditChange}
                                  placeholder="请输入"
                                />
                              </div>
                              <div>
                                <div className="zxinjiankehuzuoxinggg guiop">
                                  单位地址
                                </div>
                                <input
                                  className="zxinjianzuoshangxuanz"
                                  type="text"
                                  name="companyAddress"
                                  value={formData.companyAddress || ""}
                                  onChange={handleEditChange}
                                  placeholder="请输入"
                                />
                              </div>
                              <div>
                                <div className="zxinjiankehuzuoxinggg guiop">
                                  电话号码
                                </div>
                                <input
                                  className="zxinjianzuoshangxuanz"
                                  type="text"
                                  name="phoneNumber"
                                  value={formData.phoneNumber || ""}
                                  onChange={handleEditChange}
                                  placeholder="请输入"
                                />
                              </div>
                              <div>
                                <div className="zxinjiankehuzuoxinggg guiop">
                                  开户行
                                </div>
                                <input
                                  className="zxinjianzuoshangxuanz"
                                  type="text"
                                  name="bankName"
                                  value={formData.bankName || ""}
                                  onChange={handleEditChange}
                                  placeholder="请输入"
                                />
                              </div>
                              <div>
                                <div className="zxinjiankehuzuoxinggg guiop">
                                  银行账户
                                </div>
                                <input
                                  className="zxinjianzuoshangxuanz"
                                  type="text"
                                  name="bankAccount"
                                  value={formData.bankAccount || ""}
                                  onChange={handleEditChange}
                                  placeholder="请输入"
                                />
                              </div>
                            </>
                          )}
                          {formData.invoiceType === "个人" && (
                            <div>
                              <div className="zxinjiankehuzuoxinggg guiop">
                                发票抬头
                              </div>
                              <input
                                className="zxinjianzuoshangxuanz"
                                type="text"
                                name="invoiceTitle"
                                value={formData.invoiceTitle || ""}
                                onChange={handleEditChange}
                                placeholder="请输入个人名称"
                              />
                            </div>
                          )}
                        </div>
                        <div
                          className="zxinjiankehubaocun"
                          onClick={() => handleEditConfirm("basicIn")}
                        >
                          保存
                        </div>
                      </div>
                    </div>
                  )}
                </div>
                <div className="zgukeziliaobianjieryi">
                  <div className="zgukeziliaobianjier">
                    <div className="zgukeziliaobianjieryikuian">
                      <div className="zgukeziliaobianjierhuizi">姓名</div>
                      <div>{itemDetails?.guanname || "个人"}</div>
                    </div>
                    <div className="zgukeziliaobianjisan">
                      <div className="zgukeziliaobianjierhuizi">证件号</div>
                      <div>{itemDetails?.guanzheng || "150-500人"}</div>
                    </div>
                  </div>
                  <div className="zgukeziliaobianjier">
                    <div className="zgukeziliaobianjieryikuian">
                      <div className="zgukeziliaobianjierhuizi">邮箱</div>
                      <div>{itemDetails?.guanshou || "个人"}</div>
                    </div>
                    <div className="zgukeziliaobianjisan">
                      <div className="zgukeziliaobianjierhuizi">手机号</div>
                      <div>{itemDetails?.guanyouxiang || "150-500人"}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="zgukeziliaobianjiyitouyige">
                <div className="zgukeziliaobianjiyii">
                  <div>发票信息</div>
                  <div>编辑</div>
                </div>
                <div className="zgukeziliaobianjieryi">
                  <div className="zgukeziliaobianjier">
                    <div className="zgukeziliaobianjieryikuian">
                      <div className="zgukeziliaobianjierhuizi">发票类型</div>
                      <div>{itemDetails?.type || "个人"}</div>
                    </div>
                    <div className="zgukeziliaobianjisan">
                      <div className="zgukeziliaobianjierhuizi">
                        纳税人识别号
                      </div>
                      <div>{itemDetails?.scale || "150-500人"}</div>
                    </div>
                  </div>
                  <div className="zgukeziliaobianjier">
                    <div className="zgukeziliaobianjieryikuian">
                      <div className="zgukeziliaobianjierhuizi">发票抬头</div>
                      <div>{itemDetails?.type || "个人"}</div>
                    </div>
                    <div className="zgukeziliaobianjisan">
                      <div className="zgukeziliaobianjierhuizi">电话号码</div>
                      <div>{itemDetails?.scale || "150-500人"}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}
          {currentTab === "租约" && (
            <div>
              <div className="zshouxiazzz">
                <div className="zshouxiatouuuo oioioioiwd">
                  <div className="zshouxiatouy">租约编号</div>
                  <div className="zshouxiatouer">租约类型</div>
                  <div className="zshouxiatouer">租赁空间</div>
                  <div className="zshouxiatouer">租期</div>
                  <div className="zshouxiatouer">租约状态</div>
                  <div className="zshouxiatouer">招商负责人</div>
                </div>
                <div className="zshouxiatouoooi">
                  <div className="zshouxiatouyy">ZY201909231532 XXXXX</div>
                  <div className="zshouxiatoueer">新租</div>
                  <div className="zshouxiatoueer">骏豪中央广场A座 3层-302</div>
                  <div className="zshouxiatoueer">2019-01-02至 2010-09-20</div>
                  <div className="zshouxiatouersan">未开始</div>
                  <div className="zshouxiatouersi">张三</div>
                </div>
                <div className="zshouxiatouoooi">
                  <div className="zshouxiatouyy">ZY201909231532 XXXXX</div>
                  <div className="zshouxiatoueer">新租</div>
                  <div className="zshouxiatoueer">骏豪中央广场A座 3层-302</div>
                  <div className="zshouxiatoueer">2019-01-02至 2010-09-20</div>
                  <div className="zshouxiatouersan">未开始</div>
                  <div className="zshouxiatouersi">张三</div>
                </div>
                <div className="zshouxiatouoooi">
                  <div className="zshouxiatouyy">ZY201909231532 XXXXX</div>
                  <div className="zshouxiatoueer">新租</div>
                  <div className="zshouxiatoueer">骏豪中央广场A座 3层-302</div>
                  <div className="zshouxiatoueer">2019-01-02至 2010-09-20</div>
                  <div className="zshouxiatouersan">未开始</div>
                  <div className="zshouxiatouersi">张三</div>
                </div>
                <div className="zshouxiatouoooi">
                  <div className="zshouxiatouyy">ZY201909231532 XXXXX</div>
                  <div className="zshouxiatoueer">新租</div>
                  <div className="zshouxiatoueer">骏豪中央广场A座 3层-302</div>
                  <div className="zshouxiatoueer">2019-01-02至 2010-09-20</div>
                  <div className="zshouxiatouersan">未开始</div>
                  <div className="zshouxiatouersi">张三</div>
                </div>
              </div>
            </div>
          )}
          {currentTab === "租期" && (
            <div>
              <div className="zshouxiazzz">
                <div className="zzuoxinzu">
                  <div
                    className="zzuoxinzuxinzu"
                    onClick={() => setIsCreating(true)}
                  >
                    ＋新租
                  </div>
                  <div className="zzuoxinzuzuqibiandongmingxi">
                    租期变动明细＞
                  </div>
                </div>
                <div className="zshouxiatouuuop oioioioiwd">
                  <div className="zshouxiatouy">楼宇</div>
                  <div className="zshouxiatouer">楼层</div>
                  <div className="zshouxiatouer">租赁空间</div>
                  <div className="zshouxiatouer">租期开始日期</div>
                  <div className="zshouxiatouer">租期结束日</div>
                  <div className="zshouxiatouer">租住状态</div>
                </div>{" "}
                {leaseData.map((item, index) => (
                  <div
                    key={index}
                    className="zshouxiatouoooio"
                    onClick={() => handleSelectLease(item)} // 点击时显示对应遮罩层
                  >
                    <div className="zshouxiatouyy">{item.suolouyu}</div>
                    <div className="zshouxiatoueer">{item.suolouceng}</div>
                    <div className="zshouxiatoueer">{item.kongjian}</div>
                    <div className="zshouxiatoueer">{item.zuzhukaishi}</div>
                    <div className="zshouxiatouersan">{item.zuzhujieshu}</div>
                    <div
                      className={`zshouxiatouersi ${
                        item.kenamdae === "租期已结束"
                          ? "red-text" // 红色样式类
                          : item.kename === "租期中"
                          ? "green-text" // 绿色样式类
                          : ""
                      }`}
                    >
                      {item.kenamdawe || "租期中"}
                    </div>
                  </div>
                ))}
                <Pagination
                  current={currentPage}
                  onChange={(page) => setCurrentPage(page)}
                  total={leaseData.length * 10}
                />
                {isCreating && (
                  <div className="overlay-mask">
                    <div className="overlay-content">
                      <div className="overlay-header">
                        <span>新建租期信息</span>
                        <button
                          className="close-btn"
                          onClick={() => setIsCreating(false)}
                        >
                          ×
                        </button>
                      </div>
                      <div className="zxinjiankehuzuozhoyi">
                        <div>
                          <label className="zxinjiankehuzuoxing">
                            客户名称:
                          </label>
                          <input
                            className="zxinjianzuoshangxuanz"
                            type="text"
                            name="kename"
                            value={formData.suolouyu}
                            onChange={handleInputChange}
                          />
                        </div>
                        <div>
                          <label className="zxinjiankehuzuoxing">
                            客户类型:
                          </label>
                          <input
                            className="zxinjianzuoshangxuanz"
                            type="text"
                            name="keuser"
                            value={formData.suolouceng}
                            onChange={handleInputChange}
                          />
                        </div>
                        <div>
                          <label className="zxinjiankehuzuoxing">行业:</label>
                          <input
                            className="zxinjianzuoshangxuanz"
                            type="text"
                            name="kehang"
                            value={formData.kongjian}
                            onChange={handleInputChange}
                          />
                        </div>
                        <div>
                          <label className="zxinjiankehuzuoxing">
                            租期开始日期:
                          </label>
                          <input
                            className="zxinjianzuoshangxuanz"
                            type="date"
                            name="startDate"
                            value={formData.startDate}
                            onChange={handleInputChange}
                          />
                        </div>
                        <div>
                          <label className="zxinjiankehuzuoxing">
                            租期结束日期:
                          </label>
                          <input
                            className="zxinjianzuoshangxuanz"
                            type="date"
                            name="endDate"
                            value={formData.endDate}
                            onChange={handleInputChange}
                          />
                        </div>
                      </div>
                      <div className="overlay-footer">
                        <button
                          onClick={() => setIsCreating(false)}
                          className="cancel-btn"
                        >
                          取消
                        </button>
                        <button onClick={handleSave} className="confirm-btn">
                          保存
                        </button>
                      </div>
                    </div>
                  </div>
                )}
                {selectedLease && (
                  <div className="overlay-mask">
                    <div className="overlay-content">
                      <div className="overlay-header">
                        <span>续租</span>
                        <button
                          className="close-btn"
                          onClick={() => setSelectedLease(null)}
                        >
                          ×
                        </button>
                      </div>
                      <div className="overlay-body">
                        <div className="zxinjiankehuzuozhoyi">
                          <div>
                            <div className="zxinjiankehuzuoxing">楼宇</div>
                            <input
                              className="zxinjianzuoshangxuanz"
                              type="text"
                              name="building"
                              value={selectedLease.suolouyu || ""}
                              onChange={(e) =>
                                setSelectedLease({
                                  ...selectedLease,
                                  suolouyu: e.target.value,
                                })
                              }
                            />
                          </div>
                          <div>
                            <div className="zxinjiankehuzuoxing">楼层</div>
                            <input
                              className="zxinjianzuoshangxuanz"
                              type="text"
                              name="floor"
                              value={selectedLease.suolouceng || ""}
                              onChange={(e) =>
                                setSelectedLease({
                                  ...selectedLease,
                                  suolouceng: e.target.value,
                                })
                              }
                            />
                          </div>
                          <div>
                            <div className="zxinjiankehuzuoxing">租赁空间</div>
                            <input
                              className="zxinjianzuoshangxuanz"
                              type="text"
                              name="space"
                              value={selectedLease.kongjian || ""}
                              onChange={(e) =>
                                setSelectedLease({
                                  ...selectedLease,
                                  kongjian: e.target.value,
                                })
                              }
                            />
                          </div>
                        </div>
                        <div className="zxinjiankehuzuozhoyi">
                          <div>
                            <div className="zxinjiankehuzuoxinggg guiop">
                              租期开始日期
                            </div>
                            <input
                              className="zxinjianzuoshangxuanz"
                              type="date"
                              name="startDate"
                              value={selectedLease.zuzhukaishi || ""}
                              onChange={(e) =>
                                setSelectedLease({
                                  ...selectedLease,
                                  zuzhukaishi: e.target.value,
                                })
                              }
                            />
                          </div>
                          <div>
                            <div className="zxinjiankehuzuoxinggg guiop">
                              租期结束日期
                            </div>
                            <input
                              className="zxinjianzuoshangxuanz"
                              type="date"
                              name="endDate"
                              value={selectedLease.zuzhujieshu || ""}
                              onChange={(e) =>
                                setSelectedLease({
                                  ...selectedLease,
                                  zuzhujieshu: e.target.value,
                                })
                              }
                            />
                          </div>
                        </div>
                      </div>
                      <div className="overlay-footer">
                        <button onClick={() => setSelectedLease(null)}>
                          取消
                        </button>
                        <button
                          onClick={() => {
                            onUpdate(selectedLease); // 调用父组件的更新逻辑
                            alert("保存成功！");
                            setSelectedLease(null); // 关闭遮罩层
                          }}
                        >
                          保存
                        </button>
                      </div>
                    </div>
                  </div>
                )}
              </div>
            </div>
          )}

          {currentTab === "账单" && (
            <div>
              <img className="zzuozhangdantu" src={wu} alt="" />
              <p className="zzuozhangdanjijiangshangxian">即将上线~</p>
            </div>
          )}
          {currentTab === "保修" && (
            <div>
              <div>
                <div className="zshouxiaz">
                  <div className="zshouxiatouuuot oioioioiwd">
                    <div className="zshouxiatouy">报修人</div>
                    <div className="zshouxiatouer">报修人手机号</div>
                    <div className="zshouxiatouer">保修位置</div>
                    <div className="zshouxiatouer">保修类型</div>
                    <div className="zshouxiatouer">租期结束日</div>
                    <div className="zshouxiatouer">租住状态</div>
                    <div className="zshouxiatouer">租住状态</div>
                    <div className="zshouxiatouer">处理状态</div>
                  </div>
                  <div className="zshouxiatouoooi">
                    <div className="zshouxiatouyy">骏豪中央公园广场A座</div>
                    <div className="zshouxiatoueer">3层</div>
                    <div className="zshouxiatoueer">301</div>
                    <div className="zshouxiatoueer">2019-01-02</div>
                    <div className="zshouxiatouersan">2020-09-20</div>
                    <div className="zshouxiatouersi">租期未开始</div>
                  </div>
                  <div className="zshouxiatouoooi">
                    <div className="zshouxiatouyy">骏豪中央公园广场A座</div>
                    <div className="zshouxiatoueer">3层</div>
                    <div className="zshouxiatoueer">301</div>
                    <div className="zshouxiatoueer">2019-01-02</div>
                    <div className="zshouxiatouersan">2020-09-20</div>
                    <div className="zshouxiatouersi">租期中</div>
                  </div>
                  <div className="zshouxiatouoooi">
                    <div className="zshouxiatouyy">骏豪中央公园广场A座</div>
                    <div className="zshouxiatoueer">3层</div>
                    <div className="zshouxiatoueer">301</div>
                    <div className="zshouxiatoueer">2019-01-02</div>
                    <div className="zshouxiatouersan">2020-09-20</div>
                    <div className="zshouxiatouersi">租期已结束</div>
                  </div>
                </div>
              </div>
            </div>
          )}
          {currentTab === "访客" && (
            <div>
              <img className="zzuozhangdantu" src={wu} alt="" />
              <p className="zzuozhangdanjijiangshangxian">即将上线~</p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
